<template>
	<view class="container-box">
		<!-- <view class="head-tabs">
      <u-tabs :list="tabList" @click="tabClick"></u-tabs>
    </view> -->
		<!-- <view class="head-tabs">
			<view class="tabs-item" v-for='item in tabList' :key='item.name' @click="tabClick">{{item.name}}</view>
		</view> -->
		<view class="content-box">
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<view class="item-box" v-for="item in list" :key="item.topicId" @click="hotCommunityMethod(item)">
					<img :src="
              item.articlesImageUrl
                ? item.articlesImageUrl
                : baseUrl + '/static/error.png'
            " alt="" />
					<view class="right-box">
						<view class="tilte-top">
							<view class="tilte-top-h">{{ item.title }}</view>
							<view style="width: 120rpx; flex-shrink: 0">
								<u-button v-if="item.isAttention==='N'" color="#2E75E8"
									@tap.stop="attentionMethod('Y', item)" type="primary" :plain="true"
									size="mini">关注</u-button>
								<u-button v-else size="mini" color="#2E75E8"
									@tap.stop="attentionMethod('N', item)">取消关注</u-button>
							</view>
						</view>
						<view class="tilte-center">{{ item.content }}</view>
						<view class="title-bottom">
							<view style="display: flex; font-size: 20rpx; margin-right: 20rpx">
								<text>{{ item.articlesQuantity }}</text>个内容
							</view>
							<view style="display: flex; font-size: 20rpx">
								<text>{{ item.followQuantity }}</text>个关注
							</view>
						</view>
					</view>
				</view>
				<!-- <u-loadmore :status="status" /> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		hotTopic,
		followTopic,
		unFollowTopic,
	} from "@/api/axios/HairCommunity.js";
	export default {
		props: {
			openId: {
				require: true,
				type: String,
			},
			tabList: {
				require: true,
				type: Array,
			},
		},
		data() {
			return {
				list: [],
				baseUrl: this.staticURL,
				pageNo: 1,
				pageSize: 20,
				status: "loadmore", //loadmore/loading / nomore
			};
		},
		methods: {
			tabClick() {},
			scrolltolower() {
				let _this = this;
				if (this.status !== "nomore" && this.status !== "loading") {
					this.status = "loading";
					hotTopic({
						params: {
							openId: this.openId,
							pageNo: this.pageNo,
							pageSize: this.pageSize,
						},
					}).then((res) => {
						_this.list = _this.list.concat(res.records);
						if (res.records.length > _this.pageSize) {
							_this.pageNo = _this.pageNo + 1;
							_this.status = "loadmore";
						} else {
							_this.status = "nomore";
						}
						console.log(_this.status);
					});
				}
			},
			attentionMethod(isFlag, item) {
				let _this = this;
				if (isFlag === "Y") {
					followTopic({
						openId: this.openId,
						topicId: item.topicId,
					}).then((res) => {
						_this.list.forEach((m) => {
							if (m.topicId === item.topicId) {
								m.isAttention = 'Y';
							}
						});
					});
				} else {
					unFollowTopic({
						openId: this.openId,
						topicId: item.topicId,
					}).then((res) => {
						_this.list.forEach((m) => {
							if (m.topicId === item.topicId) {
								console.log(m.isAttention);
								m.isAttention = 'N';
							}
						});
					});

				}
			},
			hotCommunityMethod(data) {
				uni.navigateTo({
					url: "/pages/HotTopicList/index" + uni.$u.queryParams(data),
				});
			},
		},
		mounted() {
			let _this = this;
			this.status = "loading";
			hotTopic({
				params: {
					openId: this.openId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				},
			}).then((res) => {
				_this.list = _this.list.concat(res.records);
				if (res.records.length > _this.pageSize) {
					_this.pageNo = _this.pageNo + 1;
					_this.status = "loadmore";
				} else {
					_this.status = "nomore";
				}
			});
		},
	};
</script>

<style lang="scss">
	@import "./index.scss";
</style>